<!-- 总数盘点 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
		  <view slot="bottom">
		    <template>
		      <view class="flex flex-sa f-35 m-b-30">
		        <view class="f-35">
		          <view class="flex flex-c f-28 text-color"> 2023-07-15 13:33 </view>
		        </view>
			  </view>
		    </template>
		  </view>
		</hx-navbar>
		<view class="form-view">
			<view class="form-item flex">
				<view class="label f-30">
					备注
				</view>
				<view class="input-view">
					<input type="text">
				</view>
			</view>
		</view>
		<view class="list-view">
			<view class="title f-30">
				总数仓
			</view>
			<view class="item-view m-b-20">
				<view class="type-view p-b-10">
					<text class="blue p-r-10">00120001</text>
					<text class="green">白皮#</text>
				</view>
				<view class="sku-view flex">
					<view class="sku-item">
						<text class="lable">匹数</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">盘点</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">盈亏</text>
						<text class="m-l-10">-70</text>
					</view>
					<view class="sku-item">
						<text class="lable">数量</text>
						<text class="m-l-10">70米</text>
					</view>
					<view class="sku-item">
						<text class="lable">盘点</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">盈亏</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">幅宽</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">克重</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">规格</text>
						<text class="m-l-10">70</text>
					</view>
					<view class="sku-item">
						<text class="lable">缸号</text>
						<text class="m-l-10">70</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fot-view flex flex-sb">
			<view class="fot-l">
				共 <text class="m-l-10 m-r-10 green">0匹</text> <text class="blue">0</text>
			</view>
			<view class="fot-r flex">
				<view class="text-view f-32 blue">
					选产品
				</view>
				<view class="save-btn m-l-10">
					<u-button text="保存" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
					<u-button text="审核" shape="circle" color="#f38c00"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import clIcon from "@/components/cl-icon/cl-icon.vue";
	export default {
		name: '',
		components: {
		  clIcon
		},
		data() {
			return {
				search: null,
				config: {
				  title: "总数盘点",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
					{
				      key: "btn2",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
			}
		},
		methods: {
			searchChange() {
			  this.goodSpuDataArr = [];
			  this.pages.current = 1;
			  this.initData();
			},
			clickBtn(item) {
			  // console.log("index", item);
			  if (item.key === "btn1") {
			    this.$Router.push({
			      name: "financeAccountDetails",
			    });
			  } else if (item.key === "btn2") {
			    // this.productPopShow = !this.productPopShow;
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text-color {
		color: #e9e9e9;
	}
	.form-view {
		margin-top: 70rpx;
		background-color: #fff;
		.form-item {
			height: 100rpx;
			align-items: center;
			padding: 0 40rpx;
			border-bottom: 1rpx solid #eee;
			&:last-child {
				border-bottom: none;
			}
			.label {
				color: #999;
				margin-right: 20rpx;
			}
			.input-view {
				flex: 1;
			}
		}
	}
	.list-view {
		padding-bottom: 120rpx;
		.title {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 20rpx;
		}
		.item-view {
			background-color: #fff;
			padding: 14rpx;
			.sku-view {
				flex-wrap: wrap;
				.sku-item {
					width: 33.33%;
					.lable {
						color:#999;
					}
				}
			}
		}
	}
	.green {
		color: #53c21d;
	}
	.blue {
		color: #409EFF;
	}
	.fot-view {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #fff;
		z-index: 11;
		padding: 0 30rpx;
		align-items: center;
		
		.save-btn {
			width: 230rpx;
		}
		.fot-r {
			align-items: center;
		}
	}
</style>